<template>
  <div class="gehome">
    <div class="lrcContainer">
      <div class="lrc" ref="lrc">
        <p
          class="lrc-p"
          :class="{
            active:
              currentTime > allKeys[index] && currentTime < allKeys[index + 1],
          }"
          v-for="(item, key, index) in lrcData"
          :key="index"
        >
          <span>{{ item }}{{ scrollLRC(index) }}</span>
        </p>
      </div>
    </div>
    <audio :src="list" ref="player" autoplay loop controls></audio>
  </div>
</template>
<script>
import { songUrl, songLyric } from "../../api/home";
export default {
  data() {
    return {
      list: "",
      lrcData: "",
      lyric: "",
      currentTime: 0,
      allKeys: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //通过ID获取歌单
    gequ(cid) {
      songUrl(cid).then((res) => {
        console.log(res);
        this.list = res.data.data[0].url;
        // console.log(this.list)
        this.initGeci(cid);
      });
    },
    //获取歌词
    initGeci(cid) {
      songLyric(cid).then((res) => {
        console.log(res.data.lrc.lyric);
        this.lyric = res.data.lrc.lyric;
        this.filterLRC(this.lyric);
      });
    },
    filterLRC(values) {
      if (!values) return;
      var lrc = {};
      var lyrics = values.split("\n");
      var reg = /\[\d*:\d*(\.|:)\d*]/g;
      for (var i = 0; i < lyrics.length; i++) {
        var timeRegArr = lyrics[i].match(reg);
        if (!timeRegArr) continue;
        var content = lyrics[i].replace(timeRegArr, "");
        var t = timeRegArr[0];
        var min = parseInt(t.match(/\[\d*/i).toString().slice(1));
        var sec = parseInt(t.match(/:\d*/i).toString().slice(1));
        var time = min * 60 + sec;
        lrc[time] = content;
      }
      this.lrcData = lrc;
      this.getAllkeys(lrc);
      console.log(this.lrcData);
    },
    // 获取音乐播放时间
    // 1音乐总时长，音乐正在播放的时间
    addEventHandle() {
      this.$refs.player.addEventListener("timeupdate", () => {
        // console.log(event, this.$refs.player.currentTime); //当前时间
        // console.log(this.$refs.player.duration);
        this.currentTime = this.$refs.player.currentTime;
      });
    },
    //
    getAllkeys(lrcArr) {
      for (var key in lrcArr) {
        this.allKeys.push(key);
      }
      console.log(this.allKeys);
    },
    scrollLRC(index) {
      if (
        this.currentTime > this.allKeys[index] &&
        this.currentTime < this.allKeys[index + 1]
      ) {
        this.$refs.lrc.style.top = -(30 * (index - 2)) + "px";
      }
    },
  },
  created() {
    // const id = 33894312;

    const cid = this.$route.params.id;
    this.gequ(cid);
    console.log(cid);
  },
  mounted() {
    this.addEventHandle();
  },
  components: {},
};
</script>
<style scoped>
.gehome {
  background: skyblue;
}
.active {
  color: red;
}
.lrcContainer {
  text-align: center;
  width: 100%;
  height: 150px;

  overflow: scroll;
  position: relative;
}
.lrc {
  width: 100%;
  position: absolute;
  top: 0;
}
.lrc-p {
  height: 30px;
  line-height: 30px;
}
.up30 {
  margin-top: -30px;
}
</style>
